<html>
    <style type="text/css">
        h1, .main {
            text-align: center;
        }

        h1 {
            margin: 0;
            padding-bottom: 1%;

            animation-duration: 3s;
            animation-name: title-slidein;
        }
        @keyframes title-slidein {
            from {
                margin-left: 95%;
                width: 40%;
            }

            to {
                margin-left: 30%;
                width: 40%;
            }
        }

        .main {
            width: 500px;
            height: 500px;
            
            margin: 0px auto;
            overflow: hidden;
        }

        .main > img {
            margin: 20px;
        }
    </style>
    <body>
        <h1>Welcome to SteveJrong's Gitee pages!</h1>
        <div class="main">
            <img width="95%" height="95%" src="http://pic.uzzf.com/up/2020-1/15794032592670850.jpg" />
        </div>
        <script type="text/javascript">
            console.log('Welcome gitee pages!');
        </script>
    </body>

    <script type="text/javascript">

    </script>
</html>